Scrapboxで暗記シートを作る (CSSだけ使ったバージョン)
これを解決するため、穴あき部分の表示・非表示をUserCSSだけで行うバージョンを作りました。UserCSSは全ての閲覧者に適用されるため、閲覧者にScrapboxへのログインやスクリプトのコピペを要請する必要はありません。 ページトップに説明書きを表示したり、Scrapboxの Hide dots 機能を上書きしたりしているため、雑多な用途のプロジェクトには適していません。問題配布専用のプロジェクトを作成して導入することをお勧めします。
機能
[! ]で囲まれた文字列を非表示にする
https://gyazo.com/a7208a0c98323382b50df9e004dac8b8
行をクリックすると隠された文字が表示される
再び非表示にするためには行からフォーカスを外す必要があるため、行と行のあいだに空行を設けておく等の工夫が必要になると思います
ページメニューのShow answers / Hide answersで表示、非表示を一括で切り替える
https://gyazo.com/eb195fa3698c80b3bb03747b5a28d8ce
https://gyazo.com/d0fb8991cefcf4e48f0dce54a5638db0
選択されている文字列に[! ]を付ける
選択範囲に[! ]が含まれる場合は一括で外す
この機能は自分だけに有効です
機能の紹介はここまで。
----------
閲覧者用のUserCSS
settingsという名前のページに適用して下さい。
下のコードブロックごとコピペする場合は、先頭のcode:style1.cssをcode:style.cssに書き換えて下さい。
code:style1.css
/* ページトップの説明書き */
.page:before {
content: '行をクリックすると解答が表示されます。右上のページメニューの「Show answers」をクリックすると全ての解答が表示されます。';
display: block;
border-bottom: 1px solid #bbb; margin-bottom: 2rem;
}
/* 表示色 */
.deco-\! {
}
/* 非表示 */
.app:not(.hide-dots) .line:not(.cursor-line) .deco-\! {
color: transparent;
}
/* word の記法部分を非表示にする */
.cursor-line .deco-\! :nth-child(-n+3),
.cursor-line .deco-\! :last-child {
display: none;
}
/* Hide dotsしてもドットを非表示にしない */
.line .indent-mark .dot {
display: block !important;
}
/* Hide dotsのラベル文字を書き換え */
font-size: 0;
}
font-size: 14px;
content: 'Show answers';
}
font-size: 14px;
content: 'Hide answers';
}
自分用のUserCSS
下のコードブロックごとコピペする場合は、先頭のcode:style2.cssをcode:style.cssに書き換えて下さい。
code:style2.css
/* word の記法部分を非表示にしない */
.cursor-line .deco-\! :nth-child(-n+3),
.cursor-line .deco-\! :last-child {
display: inline;
}
自分と自分以外で行をクリックした時の解答部分の表示が異なります
自分
https://gyazo.com/2f3e2703b99072378521c7fe5d308f03
自分以外
https://gyazo.com/29e13e5dc3c81fdc910f9f88168292c9
自分用のUserScript
code:script.js
(() => {
const decoChar = '!';
scrapbox.PopupMenu.addButton({
title: text => {
const reg = new RegExp(\\[${decoChar} (.+?)\\], 'g');
return reg.test(text) ? remove [${decoChar}] : add [${decoChar}];
},
onClick: text => {
const reg = new RegExp(\\[${decoChar} (.+?)\\], 'g');
if (reg.test(text)) {
return text.replace(reg, '$1');
} else {
if (!/\n/.test(text)) {
return [${decoChar} ${text}];
}
}
}
});
})();
UserScript.icon
UserCSS.icon